<template>
    <div id="main">
        <div class="head">
            <el-menu :default-active="this.$route.path"
                     background-color="#545c64"
                     active-text-color="#40E0D0"
                     text-color="#fff"
                     mode="horizontal"
                     @select="handleSelect" router>
                <div class="demo-image">
                    <el-image
                            style="width: 100px; height: 70px;"
                            fit="fill"
                            :src="src"></el-image>
                    <span>Kueiq音乐</span>
                </div>
                <template v-for="item in items">
                    <el-menu-item :index="item.index" :key="item.index">
                        {{item.title}}
                    </el-menu-item>
                </template>
                <div class="search">
                    <Search></Search>
                </div>
                <div class="text1">
                    <span>客服中心</span><span>招纳贤士</span><span>商务合作</span><span>音乐创作人中心</span>
                </div>

            </el-menu>
            <div class="head-right">
                <div class="user-con">
                    <div class="users-img">
                        <el-avatar :size="50" :src="avatar" fit="fill"/>
                    </div>
                    <el-dropdown class="user-name" trigger="click" @command="handleCommand">
                    <span class="span2">用户名
                    <i class="el-icon-caret-bottom"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item disabled>修改密码</el-dropdown-item>
                            <el-dropdown-item command="login" >登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
        </div>
        <div class="content">
            <el-main>
                <router-view></router-view>
                <a
                        :href="downloadMusicInfo.url"
                        :download="downloadMusicInfo.name"
                        target="_blank"
                        id="downloadCurrentMusic"
                ></a>
            </el-main>
        </div>
        <div class="foot">
            <Foot></Foot>
        </div>
        <bottom-control></bottom-control>
        <music-detail-card class="musicDetailCard"></music-detail-card>
        <template>
            <el-backtop style="bottom: 60px" target=""></el-backtop>
        </template>
    </div>
</template>

<script>
    import axios from "axios";

    import Foot from "@/components/Main/Foot";
    import BottomControl from "@/components/bottomControl/BottomControl";
    import MusicDetailCard from "@/views/musicDetailCard/MusicDetailCard";
    import Search from "@/components/Search/Search";

    export default {
        name: "Main",
        components: {Search, Foot, BottomControl, MusicDetailCard},
        data() {
            return {
                src: require('./../img/55.png'),
                avatar: require('./../img/team1.png'),
                items: [
                    {index: '/Home', title: '首页'},
                ],
                // 下载的音乐的信息
                downloadMusicInfo: {
                    name: "",
                    url: "",
                },
            };
        },
        computed: {
            username() {
                let username = localStorage.getItem('username');
                return username ? username : this.name;
            }
        },
        methods: {

            handleSelect(index) {
                this.$router.push(index);
            },
            handleCommand(command) {
                if (command == 'login') {
                    localStorage.removeItem('username');
                    this.$router.push('/Login');
                }
            },
        },
        watch: {
            // 监听收藏歌单的变化
            // "$store.state.collectMusicList"(current) {
            //     this.collectedMusicList = current;
            // },

            // 监听当前下载音乐信息
            "$store.state.downloadMusicInfo"(current) {
                axios
                    .get(current.url, {responseType: "blob"})
                    .then((res) => {
                        let blob = res.data;
                        let url = URL.createObjectURL(blob);
                        console.log(url);
                        let a = document.querySelector("#downloadCurrentMusic");
                        this.downloadMusicInfo.url = url;
                        this.downloadMusicInfo.name = current.name;
                        this.$nextTick(() => {
                            a.click();
                            // 用完释放URL对象
                            URL.revokeObjectURL(url);
                        });
                    })
                    .catch((err) => {
                        console.log(err);
                        this.$message.error("下载失败,请稍后重试!");
                    });

                this.downloadMusicInfo = current;
                let a = document.querySelector("#downloadCurrentMusic");
                this.$nextTick(() => {
                  a.click();
                });
            },
            // 监听vuex中的登录状态
            // "$store.state.isLogin"(current) {
            //     // console.log(current);
            //     if (current) {
            //         this.getUserMusicList();
            //     } else {
            //         // 清空收藏和创建歌单
            //         this.createdMusicList = [];
            //         this.collectedMusicList = [];
            //     }
            // },
        },
    }
</script>

<style scoped>
    .head {
        min-width: 960px;
        position: relative;
    }

    .content {
        width: 100%;
        min-width: 960px;
    }

    .demo-image {
        height: 70px;
        line-height: 70px;
        margin-right: 20px;
    }

    .head .head-right {
        position: absolute;
        top: 12px;
        right: 20px;
    }

    .head .user-con {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .span2 {
        color: white;
        margin-left: 7px;
    }

    /deep/ ul {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .text1{
        margin-right: -95px;
    }
.text1 span{
    color: rgba(211,211,211,0.88);
    padding: 0 10px;
    font-size: 0.5em;
}
.search{
    margin: 0 12px;
}
    .demo-image span {
        float: right;
        margin-left: -12px;
        letter-spacing: 2px;
        color: white;
        font-size: 1.8em;
        font-family: "Microsoft YaHei", 'YouYuan', Helvetica;
    }

    /deep/ .el-menu--horizontal > .el-submenu .el-submenu__title {
        height: 70px;
        line-height: 70px;
        font-size: 1em;
        font-family: STXihei;
    }

    /deep/ .el-main {
        padding: 0;
    }

    .el-button {
        background-color: #40E0D0;
        padding: 8px 12px;
    }

    .el-button--primary {
        border: none;
    }

    .el-menu--horizontal {
        padding-right: 184px;
    }

    .el-menu--horizontal > .el-submenu {
        float: none;
    }

    .el-menu--horizontal > .el-menu-item {
        float: none;
        line-height: 70px;
        height: 70px;
        font-size: 1em;
        font-family: STXihei;
    }

    .el-menu--horizontal > .el-menu-item a {
        text-decoration: none;
    }

    a {
        text-decoration: none;
        color: white;
    }

    a:active {
        background-color: #00FA9A;
    }

    .el-menu--horizontal .span1 {
        line-height: 70px;
        margin-left: 30px;
    }

    .el-backtop, .el-calendar-table td.is-today {
        color: #40E0D0;
    }
</style>